<template>
	<view class="time-control">
		<view class="left base-time">
			<view class='icon'><van-icon name="clock-o" /></view>
			<view class="time">
				<picker mode="time" :value="startTime" @change="bindStartTimeChange">
					<view class="uni-input font-size-style">{{startTime}}</view>
				</picker>
			</view>
		</view>
		<view class="middle">-</view>
		<view class="right base-time">
			<view class='icon'><van-icon name="clock-o" /></view>
			<view class="time">
				<picker mode="time" :value="endTime" @change="bindEndTimeChange">
					<view class="uni-input font-size-style">{{endTime}}</view>
				</picker>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, computed, onMounted } from 'vue'
	
	const props = defineProps({
		startTime: {
			type: String,
			required: true
		},
		endTime: {
			type: String,
			required: true
		},
		preEndTime: {
			type:String,
			required: true
		}
	})
	const emits = defineEmits(["onSelectStartTimeCB", "onSelectEndTimeCB"])
	
	const res = ref("-");
	const queryRes = (s, e) => {
		const [s_s, s_e] = s.split(":").map(t => Number(t));
		const [e_s, e_e] = e.split(":").map(t => Number(t));
		let r = "";
		if (e_e > s_e || e_e == s_e) {
			r = (e_s - s_s) + '小时' + (e_e - s_e) + '分钟'
		} else {
			r = e_s - 1 - s_s + '小时' + (e_e + 60 - s_e) + '分钟'
		}
		res.value = r;
	}
	const validateTime = (s, e) => {
		const [s_s, s_e] = s.split(":").map(t => Number(t));
		const [e_s, e_e] = e.split(":").map(t => Number(t));
		return e_s > s_s || (e_s === s_s && e_e > s_e);
	}
	const startTime = ref(props.startTime);
	const endTime = ref(props.endTime);
	const bindEndTimeChange = (e) => {
		if (validateTime(startTime.value, e.detail.value)) {
			const cb = () => {
				endTime.value = e.detail.value
				queryRes(startTime.value, endTime.value)
			}
			emits('onSelectEndTimeCB', e.detail.value, cb)
			
		} else {
			uni.showToast({
				title: "结束时间不能小于开始时间",
				icon: "none",
				duration:2000
			})
		}
	}
	const bindStartTimeChange = (e) => {
		// startTime.value = e.detail.value
		// emits('onSelectStartTimeCB', e.detail.value);
		console.log("---->", e.detail.value, props.preEndTime)
		if(props.preEndTime !== "00:00" && !validateTime(props.preEndTime, e.detail.value)){
			uni.showToast({
				title: "开始时间不能小于上个时间段的结束时间",
				icon: "none",
				duration:2000
			})
			return;
		}
		
		if (validateTime(e.detail.value, endTime.value)) {
			startTime.value = e.detail.value
			emits('onSelectStartTimeCB', e.detail.value)
			queryRes(startTime.value, endTime.value)
		} else {
			uni.showToast({
				title: "开始时间不能大于结束时间",
				icon: "none",
				duration:2000
			})
		}
	}
	
</script>

<style lang="scss" scoped>
	.time-control {
		// margin-top: 80upx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		.left{
			
		}
		.middle{
			margin: 0 10upx;
			color: #081A2A;
		}
		.right{}
		
		.base-time{
			display: flex;
			justify-content: flex-start;
			align-items: center;
			color: #081A2A;
			background: #F7FBFE;
			// background-color: #2BC888;
			padding: 10upx 20upx;
			border-radius: 30upx;
			.icon{}
			.time{				
				.font-size-style{
					font-size: 30upx;
					margin-left: 10upx;
				}
			}
		}
		
		
	// 	.time {
	// 		.title {
	// 			margin-left: 10upx;
	// 		}
	
	// 		.right-select-time {
	// 			display: flex;
	// 			justify-content: center;
	// 			align-items: center;
	// 		}
	// 	}
	
		// .time-lang {
		// 	margin-top: 40upx;
		// 	width: 100%;
		// 	color: #2d2d2d;
		// 	text-align: center;
		// 	font-size: 32upx;
		// }
	}
</style>